<template>
  <div class="home-content">
    <h2 class="title">热门精选</h2>
    <div class="list">
      <template v-for="(item, index) in houseList" :key="item.data.houseId">
        <house-item-v9 v-if="item.discoveryContentType === 9" :item-data="item.data" @click="itemClick(item.data)" />
        <!-- todo组件上绑定click事件是会直接绑定到组件根元素上的 -->
        <house-item-v3 v-else-if="item.discoveryContentType === 3" :item-data="item.data"
          @click="itemClick(item.data)" />
      </template>

    </div>
  </div>
</template>

<script setup>
import useHomeStore from '@/stores/modules/home'
import houseItemV9 from "@/components/house-item-v9/index.vue"
import houseItemV3 from "@/components/house-item-v3/index.vue"
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';

const homeStore = useHomeStore()
const { houseList } = storeToRefs(homeStore)
const router = useRouter()
const itemClick = (hoseInfo) => {
  router.push({
    path: '/detail',
    query: {
      houseId: hoseInfo.houseId,
    }
  })
}
</script>

<style lang="less" scoped>
.home-content {
  padding: 10px 8px;

  .title {
    font-size: 22px;
    padding: 10px;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>